<template>
  <div class="baseinfo-content" v-loading="loading">
    <template v-for="(item, index) in infolist" :key="item.id">
      <p class="item-info">
        <span class="left-label">{{ item.label }}：</span>
        <!-- <span
          class="right-info-text"
          v-if="
            !props.isEdit &&
            ['sjbmc', 'sjms', 'zrks', 'ywfl'].indexOf(item.key) > -1
          "
          :class="{ blue: index % 2 == 0 }"
          >111111111</span
        > -->
        <span
          class="right-info-text"
          v-if="
            !props.isEdit &&
            [
              'createTime',
              'lastModify',
              'objectNameChn',
              'busiTypeNames',
              'belongOrgName',
              'belongOrgId',
              'objectDesc',
            ].indexOf(item.key) > -1
          "
          :class="{ blue: index % 2 == 0 }"
        >
          <span v-if="item.key == 'belongOrgName'">{{
            baseInfo.belongOrgName
          }}</span>
          <span v-else-if="item.key == 'busiTypeNames'">{{
            baseInfo.busiTypeNames && baseInfo.busiTypeNames.join(',')
          }}</span>
          <span v-else-if="item.key == 'lastModify'">{{
            formatDateTime(baseInfo.busiTypeCodes)
          }}</span>
          <span v-else-if="item.key == 'createTime'">{{
            formatDateTime(baseInfo.busiTypeCodes)
          }}</span>
          <span v-else>{{ baseInfo[item.key] }}</span>
        </span>
        <span
          class="right-info-text"
          v-if="
            [
              'createTime',
              'lastModify',
              'objectNameChn',
              'belongOrgId',
              'objectDesc',
              'busiTypeNames',
              'belongOrgName'
            ].indexOf(item.key) < 0
          "
          :class="{ blue: index % 2 == 0 }"
          >{{ baseInfo[item.key] }}</span
        >

        <span
          class="right-info-text"
          :class="{ blue: index % 2 == 0 }"
          v-if="props.isEdit"
        >
          <el-input
            v-model="baseInfo[item.key]"
            v-if="item.key == 'objectNameChn'"
            style="width: 340px"
          />
          <el-input
            v-model="baseInfo[item.key]"
            v-if="item.key == 'objectDesc'"
            style="width: 100%"
          />
          <el-select
            v-model="baseInfo.belongOrgId"
            placeholder="请选择"
            style="width: 340px"
            v-if="item.key == 'belongOrgName'"
          >
            <el-option
              v-for="item in zrkslist"
              :key="item.orgId"
              :label="item.orgName"
              :value="item.orgId"
            />
          </el-select>

          <el-select
            v-model="baseInfo.busiTypeCodes"
            placeholder="请选择"
            style="width: 100%"
            v-if="item.key == 'busiTypeNames'"
            multiple
          >
            <el-option
              v-for="item in ywfllist"
              :key="item.busiTypeCode"
              :label="item.busiTypeName"
              :value="item.busiTypeCode"
            />
          </el-select>
        </span>
      </p>
    </template>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useRoute } from "vue-router";
import { getsjmlDetail, updatesjml } from "@/api/sjml";
import { getsjqdList } from "@/api/sjqd";
import { getTypeList, busioptions } from "@/api";
import { ElMessage } from "element-plus";
import { Minxfun } from "@/utils/minxin";
const { formatDateTime } = Minxfun();

const props = defineProps({
  isEdit: Boolean,
});

const emit = defineEmits("baseInfo");

let loading = ref(false);

let infolist = [
  {
    id: 1,
    label: "数据表名称",
    key: "objectNameChn",
  },
  {
    id: 2,
    label: "表英文名称",
    key: "objectName",
  },
  {
    id: 3,
    label: "数据描述",
    key: "objectDesc",
  },
  {
    id: 4,
    label: "责任科室",
    key: "belongOrgName",
  },
  {
    id: 5,
    label: "业务分类",
    key: "busiTypeNames",
  },
  {
    id: 6,
    label: "所属目录",
    key: "schemaName",
  },
  {
    id: 7,
    label: "存储库",
    key: "dbType",
  },
  {
    id: 8,
    label: "存储空间",
    key: "storageSpace",
  },
  {
    id: 9,
    label: "数据条数",
    key: "dataAmount",
  },
  {
    id: 10,
    label: "数据存放路径",
    key: "dataPath",
  },
  {
    id: 11,
    label: "更新时间",
    key: "lastModify",
  },
  {
    id: 12,
    label: "创建时间",
    key: "createTime",
  },
  {
    id: 13,
    label: "创建用户",
    key: "createdBy",
  },
];

let route = useRoute();
let baseInfo = ref({});
let catchInfo = ref({});
onMounted(() => {
  // baseInfo.value = JSON.parse(route.query.row);
  // catchInfo.value = JSON.parse(route.query.row);
  // baseInfo.value = JSON.parse(route.params.row);
  // console.log(baseInfo);

  getData();
  getType();
});

let zrkslist = ref([]);
let ywfllist = ref([]);

// 获取姓名
const getName = (value) => {
  if (Array.isArray(value)) {
    let names = ywfllist.value.filter(
      (item) => value.indexOf(item.busiTypeCode) > -1
    );
    return names.map((item) => item.busiType).join(",");
  } else {
    let names = zrkslist.value.filter((item) => item.orgId === value);
    return names.map((item) => item.orgName).join(",");
  }
};

const getType = async () => {
  try {
    let res2 = await getTypeList({
      orgTypeCode: "office",
    });
    zrkslist.value = res2.data;
    let res3 = await busioptions();
    ywfllist.value = res3.data;
  } catch (e) {
    console.error(e);
  }
};
const getData = async () => {
  // 获取数据
  try {
    loading.value = true;
    // let { data } = await getsjmlDetail({
    //   objectId: route.query.id,
    // });
    let { data } = await getsjqdList({
      id: route.query.id,
      pageNum: 1,
      pageSize: 1,
      belongOrgId: null,
    });
    baseInfo.value = data.objectList[0];
    catchInfo.value = JSON.parse(JSON.stringify(baseInfo.value));
    loading.value = false;
    emit("baseInfo", baseInfo.value);
  } catch (error) {
    console.error(error);
  }
};

// 保存
const saveInfo = async () => {
  try {
    loading.value = true;
    let { data } = await updatesjml({
      objectId: route.query.id,
      tableNameChn: baseInfo.value.objectNameChn,
      tableDesc: baseInfo.value.tableDesc,
      belongOrgId: baseInfo.value.belongOrgId + "",
      busiTypeCodes: baseInfo.value.busiTypeCodes,
    });
    catchInfo.value = JSON.parse(JSON.stringify(baseInfo.value));
    loading.value = false;
    ElMessage({
      message: "保存成功",
      type: "success",
    });
    getData()
  } catch (error) {
    console.error(error);
  }
};

const cancelInfo = () => {
  baseInfo.value = JSON.parse(JSON.stringify(catchInfo.value));
};

defineExpose({
  saveInfo,
  cancelInfo,
});
</script>

<style lang="scss" scoped>
.baseinfo-content {
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid rgba(204, 204, 204, 0.3);
  overflow: hidden;
  .item-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .left-label {
      width: 160px;
      background: rgba(142, 191, 255, 0.32);
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #333333;
      line-height: 36px;
      letter-spacing: 1px;
      text-align: center;
    }
    .right-info-text {
      padding-left: 50px;
      flex: 1;
      height: 36px;
      line-height: 36px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #666666;
      &.blue {
        background: rgba(142, 191, 255, 0.1);
      }
    }
  }
}
</style>